<script setup lang="ts">
import { useLoadMore } from 'vue-request'
import { fetchExchangeRecordListAPI } from '@/apis/fetchExchangeRecordList'
import dialogIcon from '@/static/images/phone_colorful.png'
import { useUserInfoStore } from '@/store/userInfo'

const router = useRouter()
const userInfoStore = useUserInfoStore()

/* -------------------------------- Tab START ------------------------------- */
const selectedTabIndex = ref(0)
const tabs = [{ name: '全部记录' }, { name: '待核销' }, { name: '已核销' }, { name: '已过期' }]
/* --------------------------------- Tab END -------------------------------- */

// 分页列表数据
const { dataList, loading, loadingMore, noMore, loadMore, refresh } = useLoadMore<LoadMoreData<ExchangeRecord>>(
  fetchData,
  { isNoMore: d => d?.list.length === d?.total },
)

// “加载更多”的状态
const loadMoreStatus = computed(() => {
  if (loadingMore.value)
    return 'loading'
  else if (noMore.value)
    return 'nomore'
  else
    return 'loadmore'
})

onReachBottom(() => loadMore())

/**
 * @description 分页服务函数
 */
async function fetchData(d?: LoadMoreData<ExchangeRecord>): Promise<LoadMoreData<ExchangeRecord>> {
  // 当前页数
  const _page = d?.page ? d.page + 1 : 1

  const query = () => {
    if (selectedTabIndex.value !== 0) {
      return {
        page: _page.toString(),
        limit: '10',
        status: selectedTabIndex.value.toString(),
      }
    }
    else {
      return {
        page: _page.toString(),
        limit: '10',
      }
    }
  }

  const res = await fetchExchangeRecordListAPI(
    query(),
    userInfoStore.userInfo!.token!,
  )

  return {
    list: res.data?.data.data || [],
    page: _page,
    total: res.data?.data.total || 9999,
  }
}

function handleSelectTab(item: { index: number, name: string }) {
  selectedTabIndex.value = item.index
  refresh()
}

function handleTapRecord(id: string) {
  router.push({
    name: 'redeemDetail',
    params: { id },
  })
}
</script>

<template>
  <view class="min-h-screen bg-#F8F8F8">
    <view class="sticky top-0 z-10 w-full bg-white">
      <uv-tabs
        :current="selectedTabIndex"
        :list="tabs"
        line-color="#4999F7"
        :active-style="{ color: '#4999F7', fontWeight: '600' }"
        :inactive-style="{ color: '#848484' }"
        :scrollable="false"
        @change="handleSelectTab"
      />
    </view>
    <Spacer height="24" />
    <view v-if="dataList.length > 0" class="px-24rpx">
      <RedeemItem
        v-for="item in dataList"
        :id="item.order_num.toString()"
        :key="item.id"
        :status="item.status.toString()"
        :picture="withDomain(item.image)!"
        :score="item.use_score"
        :title="item.title"
        @tap="handleTapRecord(item.id.toString())"
      />
      <!-- 加载更多 -->
      <uv-load-more v-if="dataList.length > 3" :status="loadMoreStatus" @loadmore="loadMore" />
    </view>
    <PageDefault v-else>
      暂无就诊记录
    </PageDefault>
  </view>
  <uv-loading-page :loading="loading && !loadingMore" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'redeemRecord'
style:
  navigationBarTitleText: '兑换记录'
layout: 'custom'
</route>
